// 圆角环形图组件
import BasePieChartComponent from "./base-pie-chart.js";

class RoundedRingChart extends BasePieChartComponent {
    constructor() {
        super();
    }

    // 重写默认配置，添加圆角环形特有属性
    getDefaultConfig() {
        const baseConfig = super.getDefaultConfig();
        return {
            ...baseConfig,
            roundedRingAttrs: [
                ['rounded-inner-radius_slider', '40%'],
                ['rounded-outer-radius_slider', '70%'],
                ['rounded-border-radius_number', 8],
                ['rounded-border-width_number', 2],
                ['rounded-border-color_colorpicker', '#ffffff']
            ]
        };
    }

    // 重写观察属性
    static get observedAttributes() {
        return [
            ...super.observedAttributes,
            'rounded-inner-radius_slider',
            'rounded-outer-radius_slider',
            'rounded-border-radius_number',
            'rounded-border-width_number',
            'rounded-border-color_colorpicker'
        ];
    }

    // 重写生成系列配置，设置圆角环形参数
    generateSeries(pieData, seriesConfig, pieConfig) {
        const baseSeries = super.generateSeries(pieData, seriesConfig, pieConfig);
        const { buildConfig } = window.attributeUtils;
        const roundedConfig = buildConfig(this, this.getDefaultConfig().roundedRingAttrs);

        return [{
            ...baseSeries[0],
            radius: [roundedConfig.innerRadius, roundedConfig.outerRadius],
            itemStyle: {
                ...baseSeries[0].itemStyle,
                borderRadius: roundedConfig.borderRadius,
                borderWidth: roundedConfig.borderWidth,
                borderColor: roundedConfig.borderColor
            }
        }];
    }

    // 处理圆角环形属性变化
    handleAttributeChange(name, value, currentOptions) {
        super.handleAttributeChange(name, value, currentOptions);
        
        if (!currentOptions.series || currentOptions.series.length === 0) return;
        if (!currentOptions.series[0].itemStyle) {
            currentOptions.series[0].itemStyle = {};
        }

        switch(name) {
            case 'rounded-inner-radius_slider':
            case 'rounded-outer-radius_slider':
                const roundedConfig = window.attributeUtils.buildConfig(
                    this, 
                    this.getDefaultConfig().roundedRingAttrs
                );
                currentOptions.series[0].radius = [
                    roundedConfig.innerRadius, 
                    roundedConfig.outerRadius
                ];
                this.chart.setOption(currentOptions);
                break;
            case 'rounded-border-radius_number':
                currentOptions.series[0].itemStyle.borderRadius = parseInt(value);
                this.chart.setOption(currentOptions);
                break;
            case 'rounded-border-width_number':
                currentOptions.series[0].itemStyle.borderWidth = parseInt(value);
                this.chart.setOption(currentOptions);
                break;
            case 'rounded-border-color_colorpicker':
                currentOptions.series[0].itemStyle.borderColor = value;
                this.chart.setOption(currentOptions);
                break;
        }
    }
}

customElements.define('rounded-ring-chart', RoundedRingChart);
    